<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>选择时间</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <meta name="renderer" content="webkit"/>
    <link rel="stylesheet" href="../assets/css/amazeui.min.css"/>
    <link rel="stylesheet" href="../assets/css/app2.css"/>
    <style>
        .choose {
            padding: 5px 0
        }

        .choose p {
            margin: 0;
            text-align: center;
            font-size: 1.3rem
        }

        .green p {
            color: #00a73c
        }

        .am-slider-b1 .am-direction-nav a {
            width: 12px;
            height: 12px;
        }

        .am-slider-b1 .am-direction-nav a:before {
            font-size: 12px;
        }

        .cart-btns-fixed-box {
            padding: 15px 10px;
        }

        .dd .item {
            float: left;
            margin: 2px;
            border: 1px solid #d2d2d2;
            padding: 8px 5px;
            border-radius: 5px;
        }

        .dd .item a {
            display: block;
            color: #000000;
            text-align: center
        }

        .dd .am-u-sm-3 {
            width: 23.5%;
        }

        .item.selected {
            border-color: #d90f0f;
            position: relative;
            zoom: 1;
        }

        .item.selected b {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 12px;
            height: 12px;
            overflow: hidden;
            background: url("../assets/i/icon/right.png");
        }

        .notime{
            background-color: #d2d2d2;
        }

        .notime a{
            color: #FFFFFF !important;
        }

        [class*=am-u-] + [class*=am-u-]:last-child {
            float: left
        }
    </style>
</head>
<body style="background-color: #FFFFFF">
<p class="am-text-default" style="margin: 5px 15px;">可预约时间段</p>
<div data-am-widget="slider" class="am-slider am-slider-b1" data-am-slider='{&quot;slideshow&quot;:false}'>
    <ul class="am-slides">
        <li>
            <div class="am-u-sm-3 choose">
                <p class="time">今天</p>

                <p class="date">07月22日</p>
            </div>
            <div class="am-u-sm-3 choose">
                <p class="time">明天</p>

                <p class="date">07月23日</p>
            </div>
            <div class="am-u-sm-3 choose">
                <p class="time">周五</p>

                <p class="date">07月24日</p>
            </div>
            <div class="am-u-sm-3 choose">
                <p class="time">周六</p>

                <p class="date">07月25日</p>
            </div>
        </li>
        <li>
            <div class="am-u-sm-3 choose">
                <p class="time">周日</p>

                <p class="date">07月26日</p>
            </div>
            <div class="am-u-sm-3 choose">
                <p class="time">周一</p>

                <p class="date">07月27日</p>
            </div>
            <div class="am-u-sm-3 choose">
                <p class="time">周二</p>

                <p class="date">07月28日</p>
            </div>
            <div class="am-u-sm-3 choose">
                <p class="time">周三</p>

                <p class="date">07月29日</p>
            </div>
        </li>
    </ul>
</div>

<div class="cart-btns-fixed-box">
    <div class="dd">
        <div class="item am-u-sm-3 selected"><b></b><a >10:00</a></div>
        <div class="item am-u-sm-3"><b></b><a >10:30</a></div>
        <div class="item am-u-sm-3"><b></b><a >11:00</a></div>
        <div class="item am-u-sm-3"><b></b><a >11:30</a></div>
        <div class="item am-u-sm-3"><b></b><a >12:00</a></div>
        <div class="item am-u-sm-3"><b></b><a >12:30</a></div>
        <div class="item am-u-sm-3"><b></b><a >13:00</a></div>
        <div class="item am-u-sm-3"><b></b><a >13:30</a></div>
        <div class="item am-u-sm-3 notime"><b></b><a >14:00</a></div>
        <div class="item am-u-sm-3"><b></b><a >14:30</a></div>
        <div class="item am-u-sm-3"><b></b><a >15:00</a></div>
        <div class="item am-u-sm-3"><b></b><a >15:30</a></div>
        <div class="item am-u-sm-3"><b></b><a >16:00</a></div>
        <div class="item am-u-sm-3"><b></b><a >16:30</a></div>
        <div class="item am-u-sm-3"><b></b><a >17:00</a></div>
        <div class="item am-u-sm-3"><b></b><a >17:30</a></div>
        <div class="item am-u-sm-3"><b></b><a >18:00</a></div>
        <div class="item am-u-sm-3"><b></b><a >18:30</a></div>
        <div class="item am-u-sm-3"><b></b><a >19:00</a></div>
        <div class="item am-u-sm-3"><b></b><a >19:30</a></div>
    </div>
</div>

<section class="kuaikuai-btn2 am-topbar-fixed-bottom" style="height: 75px;">
    <button type="submit" id="am-btn" class="btn am-btn am-btn-danger am-btn-lg am-btn-buy">确认选择</button>
</section>
<script src="../assets/js/jquery.min.js" type="text/javascript"></script>
<script src="../assets/js/amazeui.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {

        var dds = $('.dd .item');
        for (var i = 0; i < $('.dd .item').length; i++) {
            $(dds[i]).on('click', function () {
                if (!$(this).hasClass('notime')) {
                    $('.dd .item').removeClass('selected');
                    $(this).addClass('selected');
                }
            });
        }

        var chooses = $('.am-slides li .choose');
        for (var i = 0; i < chooses.length; i++) {
            $(chooses[i]).on('click', function () {
                $('.am-slides li .choose').removeClass('green');
                $(this).addClass('green');
            });
        }

        $('#am-btn').click(function () {
            var time = $('.selected').text();
            var date = $('.green').find('p.date').text();
            console.log(date + " " + time);
        });

    });
</script>
</body>
</html>